/** 基础tab组件*/
<template>
  <div class="container">
      <span class="num">have {{unCompletedTodoLength}} items</span>
      <div class="tabs">
          <span
            v-for="tab in tabs"
            :key="tab"
            :class="[tab, currentTab === tab ? 'actived' : '']"
            @click="toggleTab(tab)"
          >
            {{tab}}
          </span>
      </div>
      <span class="clear" @click="clearAllCompleted">Clear Completed</span>
  </div>
</template>

<script>
export default {
  name: "BaseTab",
  props: {
      currentTab: {
          type: String,
          required: true
      },
      todos: {
        type: Array,
        required: true
      }
  },
  data () {
    return {
        tabs: ['all', 'active', 'completed'],
    };
  },
 computed: {
    unCompletedTodoLength () {
      return this.todos.filter(todo => !todo.completed).length;
    }
  },
  methods: {
      toggleTab(tab) {
        this.$emit('toggleTab', tab)
      },
      clearAllCompleted(){
        this.$emit('clearAllCompleted')
      }
  }
}
</script>

<style lang="scss" scoped>
    .container {
        display: flex;
        margin: 1rem;
    }
    .tabs {
        span {
            padding: .2rem;
            margin: .5rem;
            cursor: pointer;
        }
        .actived {
            border: 1px solid red;
        }
    }
</style>
